<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听Vue更新的机制 </title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>


      
    
</body>
<script>
    let objx= {
        name:'马冬梅',
        age:18,
        arr:{
            mm:123,
            nn:213
        }
        
    };
    

    //创建一个监视实例的对象，用于监视data中属性的变化
    var obs = new Observer(objx);

    // 可以把他看成为一个vm实例
    let objy = {}

    objy._data = objx = obs

    function Observer(obj){
        //汇总对象的所有属性为数组
        const keyList = Object.keys(obj); 
        console.log(keyList)
        keyList.forEach((p)=>{
            //这里的this指向的是Observer
            Object.defineProperty(this,p,{
                get(){
                    return obj[p];
                },
                set(newValue){
                    console.log('监听到数据变化了,要去解析模板去生成虚拟Dom了');
                    obj[p] = newValue;
                }
            })
        })
    }

</script>
</html>